<template>
	<view class="content">
		<view class="hader">
			<view class="hader_tit" @tap="toindex">to HomePage</view>
			<view class="hader_login" @tap="openPopup" v-if="!userId">Login</view>
		</view>
		<!-- <view class="video" v-if="!videoSrc">
			<image :src="defvideo.coverImg"></image>
		</view> -->
		<view class="video">
			<x-video  ref="videoPlayer" videoId="myVideo" :src="videoSrc" :progress="progress" @play="videoPlay" @pause="videoPause"
			@ended="videoEnded" @timeupdate="videoTimeUp" @loadeddata="videoLoaded" @seeking="videoSeeking"
			@seeked="videoSeeked" @error="videoError" />
		</view>
		<view class="Titleplay">
			<view class="title">{{ defvideo.name }}</view>
			<view class="Summary">{{defvideo.collectCount}}集全</view>
		</view>
		<view class="Selectionset">
			<view :class="videoCollectId==item.id?'Selectionset_item defuat' :'Selectionset_item'" v-for="(item,index) in DramaSerieslists" @tap="changelink(item,index)">
				{{ index + 1 }}
				<view v-show="item.isVip" class="vip">vip</view>
			</view>
		</view>
		
		<view class="changeji">
			<view class="nextcollection" v-show="Summaryindex == 1" @tap="nextepisodes">下一集</view>
			<view class="updown" v-show="Summaryindex != Summarycount&&Summaryindex != 1">
				<view class="damn" @tap="backepisodes">上一集</view>
				<view class="damn" @tap="nextepisodes">下一集</view>
			</view>
			<view class="nextcollection" v-show="Summaryindex == Summarycount" @tap="backepisodes">上一集</view>
		</view>
		<MailPopup ref="MailPopup"></MailPopup>
		<TopayPopup :videoId="videoId" ref="Topaypopup"></TopayPopup>
	</view>
</template>

<script>
	import { getrequest, postrequest } from '../../util/api'
	import MailPopup from '@/components/emailPopup/emailPopup.vue'
	import TopayPopup from '@/components/topayPopup/topayPopup.vue'
	export default {
		data() {
			return {
				// videoSrc:"https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v",
				videoSrc:'https://private-message.oss-cn-beijing.aliyuncs.com/Eblock/images/BALCK.mp4',
				// https://private-message.oss-cn-beijing.aliyuncs.com/Eblock/images/fen.mp4
				progress: 0,  //初始进度
				DramaSerieslists: [], // 分级数列表
				videoId:'1', //选中动漫的id
				videoCollectId:1,// 集数的id
				token:'',  //登录的token
				userId:'', // 用户的id
				Summaryindex:1, //播放第几集的下标
				Summarycount:0, //总集数
				defvideo:{}, //点击过来的标题id
			}
		},
		components: { MailPopup,TopayPopup },
		// 页面加载时触发，
		async onLoad (option){
			this.videoId = option.videoId
			this.token = uni.getStorageSync('token') || '';
			this.userId = uni.getStorageSync('userId') || '';
			console.log('option',option)
			const obj = uni.getStorageSync('defvideo') || {};
			this.defvideo = JSON.parse(obj)
			console.log('defvideo',this.defvideo.coverImg)
			// 获取播放视频的列表
			await this.getvideo()
		},
		// 页面显示时触发
		onShow(){	

		},
		// 页面初次渲染完成时触发。
		onReady(){

		},
		// 页面隐藏时触发。
		onHide(){

		},
		// 用户点击分享按钮或右上角菜单分享时触发。
		onShareAppMessage(){

		},
		// 页面卸载时触发。
		onUnload(){

		},

		methods: {
			// 去首页
			toindex(){
				const tohome = uni.getStorageSync('video_indexhref') || ''
				window.location.href = tohome
			},
			// 点击上一集
			backepisodes(){
				for (let i = 0; i < this.DramaSerieslists.length; i++) {
					if(this.videoCollectId == this.DramaSerieslists[i].id){
						// console.log('选中id',this.videoCollectId,item.id)
						// 选中集数下标
						this.Summaryindex = i 
						// console.log('eaa',this.Summaryindex ,this.DramaSerieslists.length)
						// 选中集数的ID
						this.videoCollectId = this.DramaSerieslists[i-1].id
						// console.log('e',this.Summaryindex ,this.videoCollectId)
						// 获取播放地址
						this.getvideolink()
						return
					}
				}
									
			},
			// 点击下一集
			nextepisodes(){
				for (let i = 0; i < this.DramaSerieslists.length; i++) {
					if(this.videoCollectId == this.DramaSerieslists[i].id){
						// console.log('选中id',this.videoCollectId,item.id)
						// 选中集数下标
						this.Summaryindex = i + 2
						// console.log('eaa',this.Summaryindex ,this.DramaSerieslists.length)
						// 选中集数的ID
						this.videoCollectId = this.DramaSerieslists[i+1].id
						// console.log('e',this.Summaryindex ,this.videoCollectId)
					// 获取播放地址
					this.getvideolink()
						return
					}
				}
			},
			// 点击切换集数
			changelink(e,index){
				console.log('e',e,index)
				this.videoCollectId = e.id
				this.Summaryindex = index + 1 
				// 获取播放地址
				this.getvideolink()
			},
			// 获取播放地址
			async getvideolink(){
				this.token = uni.getStorageSync('token') || '';
				this.userId = uni.getStorageSync('userId') || '';
				let params ={
					videoCollectId:this.videoCollectId,
					token:this.token,
					userId:this.userId,
				}
				const res = await getrequest('/api/video/get_video_url',params)
				console.log('res状态',res)
				if(res.status == 200){
					this.videoSrc = res.data.path
				}else if(res.status == 2001){
					// 你要先登录
					this.openPopup()
				}else if(res.status == 2002){
					// 你要先开会员
					this.opentovip()
				}
			},
			// 获取视频的总集数
			async getvideo(){
				let params = {
					videoId : this.videoId,
				}
				const res = await getrequest('/api/video/video_collect_no_page',params)
				if(res.status = 200){
					this.DramaSerieslists = res.data
					console.log('请求的集数',this.DramaSerieslists)
					// 总集数
					this.Summarycount = this.DramaSerieslists.length
					console.log('总集数',this.Summarycount)
					// 进来先获取第一个视频的id
					this.videoCollectId = this.DramaSerieslists[0].id
					// 获取播放地址
					this.getvideolink()
				}

			},
			// 打开会员弹框
			opentovip(){
				this.$refs.Topaypopup.open()
			},
			// 关闭会员弹框
			closetovip(){
				this.$refs.Topaypopup.close()
			},
			// 打开登录弹框
			openPopup() {
				this.$refs.MailPopup.open()
			},
			// 关闭登录弹框
			closePopup() {
				this.$refs.MailPopup.close()
			},
				// 视频信息加载完成
			videoLoaded(durationTime) {
				console.log('durationTime',durationTime)
			},
			// 当前播放时间
			videoTimeUp(currentTime) {
				// console.log('durationTime',currentTime)
			},	
			// 点击原始播放
			videoPlay() {
				
			},
			// 正在拖动
			videoSeeking() {},
			// 拖动结束
			videoSeeked(e) {
				console.log('正在拖动',e)
			},
			// 触发暂停
			videoPause() {},
			// 播放结束
			videoEnded() {},
			// 播放错误						
			videoError() {}
		}
	}
</script>

<style lang="scss">
	.content{
		width: 100vw;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		.hader{
			width: 700rpx;
			height: 100rpx;
			margin: 0 auto;
			// border: 1px solid black;
			display: flex;
			justify-content: space-between;
			.hader_tit{
				width: 300rpx;
				height: 100rpx;
				font-size: 40rpx;
				font-weight: 500;
				line-height: 100rpx;
				color: rgba(0, 0, 0, 1);
			}
			.hader_login{
				width: 128rpx;
				height: 64rpx;
				font-size: 24rpx;
				margin: 18rpx 0 0 0;
				font-weight: 500;
				text-align: center;
				line-height: 64rpx;
				background: linear-gradient(270deg, rgba(96, 58, 245, 1) 0%, rgba(58, 107, 241, 1) 100%);
				border-radius: 10rpx;
				color: rgba(255, 255, 255, 1);
			}
		}
		.video{
			width: 750rpx;
			// height: 412rpx;
			// background-color: pink;
			border: 1px solid black;
			// ::v-deep #myVideo{
				// height: 412rpx!important;
			// }
		}
		.Titleplay{
			width: 720rpx;
			margin: 0 auto;
			margin-top: 24rpx;
			.title{
				width: 720rpx;
				font-size: 40rpx;
				font-weight: 500;
				line-height: 70rpx;
				color: rgba(12, 13, 15, 1);
			}
			.Summary{
				width: 700rpx;
				height: 30rpx;
				font-size: 28rpx;
				line-height: 30rpx;
				color: rgba(96, 98, 102, 1);
				margin: 0 auto;
				margin-top: 26rpx;
			}
		}
		.Selectionset{
			width: 728rpx;
			padding-bottom: 20rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			margin-bottom: 120rpx;
			// border: 1px solid black;
			border-bottom: 3rpx solid rgb(239,174,82);
			display: flex;
			flex-wrap: wrap;
			.Selectionset_item{
				width: 80rpx;
				height: 80rpx;
				margin: 12rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 4px;
				background: rgba(246, 246, 246, 1);
				font-size: 28rpx;
				color: rgba(20, 20, 20, 1);
				position: relative;
				.vip{
					width: 48rpx;
					height: 20rpx;
					position: absolute;
					top: 0;
					left: 32rpx;
					border-radius: 0px 4px 0px 4px;
					background: linear-gradient(90deg, rgba(255, 225, 140, 1) 0%, rgba(255, 222, 135, 1) 100%);
					font-size: 16rpx;
					font-weight: 700;
					line-height: 20rpx;
					color: rgba(103, 68, 0, 1);
					text-align: center;
				}
			}
			.defuat{
				background-color: rgba(196, 212, 255, 1);
				color: rgba(29, 87, 245, 1);
			}
		}
		.changeji{
			width: 100%;
			height: 90rpx;
			padding: 10rpx 0 0 0;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			.nextcollection{
				width: 650rpx;
				height: 64rpx;
				border-radius: 12rpx;
				background: linear-gradient(270deg, rgba(96, 58, 245, 1) 0%, rgba(58, 107, 241, 1) 100%);
				font-size: 24rpx;
				font-weight: 500;
				line-height: 64rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				margin: 0 auto;
				margin-top: 10rpx;
				margin-bottom: 50rpx;
			}
			.updown{
				width: 680rpx;
				height: 64rpx;
				// border: 1px solid black;
				margin: 0 auto;
				margin-top: 10rpx;
				margin-bottom: 50rpx;
				display: flex;
				justify-content: space-between;
				.damn{
					width: 300rpx;
					height: 64rpx;
					border-radius: 12rpx;
					background: linear-gradient(270deg, rgba(96, 58, 245, 1) 0%, rgba(58, 107, 241, 1) 100%);
					align-items: center;
					font-size: 24rpx;
					font-weight: 500;
					line-height: 64rpx;
					color: rgba(255, 255, 255, 1);
					text-align: center;
				}
			}
		}

	}
</style>
